<template>
	<view class="container">
		<view style="padding-top: 55rpx;text-align: center;font-size: 38rpx;color: #000000;">视力防控系统</view>
		<view class="mainBox">
			<view class="imBox">
				<image src="../../static/img/sl.png"></image>
			</view>
			<view class="main">
				<view class="nh">2025年3季度</view>
				<view class="sl">
					<view style="text-align: center;">
						<view>1000(人)</view>
						<view>计划筛查</view>
					</view>
					<view style="text-align: center;">
						<view>500(人)</view>
						<view>已筛查</view>
					</view>
					<view style="text-align: center;">
						<view>500(人)</view>
						<view>未筛查</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="itemBox">
			<view class="item" @tap="toInfo('/pages/slcj/jhslcj')">
				<view class="title">扫码筛查</view>
				<view class="imgBox">
					<image src="../../static/img/smsc1.png"></image>
				</view>
				<view class="main">校园筛查计划采集</view>
			</view>
			<view class="item" @tap="toInfo('/pages/slcj/slsckzd')">
				<view class="title">遥控筛查</view>
				<view class="imgBox">
					<image src="../../static/img/dzbykq.png"></image>
				</view>
				<view class="main">遥控控制视力采集</view>
			</view>
			<view class="item" @tap="toInfo('/pages/slcj/jhlist')">
				<view class="title">筛查计划</view>
				<view class="imgBox">
					<image src="../../static/img/scjh.png"></image>
				</view>
				<view class="main">校园筛查计划列表</view>
			</view>
			<view class="item" @tap="toInfo('/pages/slcj/xsda')">
				<view class="title">学生档案</view>
				<view class="imgBox">
					<image src="../../static/img/m4.png"></image>
				</view>
				<view class="main">学生档案信息列表</view>
			</view>
			<view class="item" @tap="toInfo('/pages/slcj/slcj')">
				<view class="title">个人筛查</view>
				<view class="imgBox">
					<image src="../../static/img/m1.png"></image>
				</view>
				<view class="main">个人视力筛查采集</view>
			</view>
			<view class="item" @tap="toInfo('/pages/slcj/dnygsc')">
				<view class="title">电脑验光</view>
				<view class="imgBox">
					<image src="../../static/img/dnyg.png"></image>
				</view>
				<view class="main">电脑验光视力采集</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
  data () {
    return {
	  user: {},
      activeKey: 'work',
      tabs: [{
        name: '日常工作',
        key: 'work'
      }, {
        name: '插件',
        key: 'plugin'
      }],
      todo: {
        notice: 2,
        task: 5,
        error: 1
      }
    }
  },
  created () {
    this.getInfo()
  },
  onLoad(){
	  this.getInfo()
  },
  methods: {
	  toInfo(url){
		  uni.navigateTo({
		  	url:url
		  })
	  },
    tabChange (item) {
      this.activeKey = item.key;
    },
    navigateTo (url) {
      uni.navigateTo({ url: url })
    },
	getInfo () {
	  const app = this
	  app.$store.dispatch('Info').then(res => {
	    app.user = res.user
	  })
	},
  }
}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		min-height: 100vh;
		background-color:#F2F2F2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		.mainBox{
			width: 90%;
			height: 300rpx;
			border-radius: 20rpx;
			background: linear-gradient(to right, #97f3c2, #67e3cb);
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			display: flex;
			.imBox{
				width: 24%;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 80%;
					height: 200rpx;
				}
			}
			.main{
				width: 74%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.nh{
					font-weight: 600;
					font-size: 38rpx;
					
				}
				.nm{
					
				}
				.sl{
					width: 100%;
					height: 150rpx;
					display: flex;
					justify-content: space-around;
					color: #000000;
					font-weight: 550;
					margin-top: 20rpx;
				}
			}
		}
		.itemBox{
			display: flex;
			flex-wrap: wrap;
			justify-content:space-around; 
			.item{
				width: 42%;
				height: 300rpx;
				background-color: #fff;
				margin-top: 20rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title{
					font-weight: 550;
					font-size: 30rpx;
					padding-top: 20rpx;
				}
				.imgBox{
					width: 80%;
					height: 300rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 80%;
						height: 180rpx;
					}
				}
				.main{
					font-size: 24rpx;
					color: gray;
					padding-bottom: 10rpx;
				}
			}
		}
	}
	
</style>